<script setup>
import SegTitle from "@/components/SegTitle.vue";
import {ref} from "vue";

const items = [
  {title: '专业⾼效', desc: 'Professionality & Efficiency'},
  {title: '创意⽆限', desc: 'Unlimited Creativity'},
  {title: '全球视野', desc: 'Global Perspective'},
  {title: '精准洞察', desc: 'Precise Insight'},
  {title: '灵活应变', desc: 'Agile Adaptability'},
  {title: '诚信基⽯', desc: 'Integrity-based'},
  {title: '共创共赢', desc: 'Collaborative Success'},
  {title: '客户⾄上', desc: 'Client-centric'},
]
const designer = [
  {name: '张三（Rokey）', desc: 'EICO 创始人&合伙人'},
  {name: '李四（Rokey）', desc: 'EICO 创始人&合伙人'},
  {name: '王五（Rokey）', desc: 'EICO Space 创始人&合伙人'},
  {name: '赵六（Lucy）', desc: 'EICO 厦门GM&合伙人'},
  {name: '孙七（Lucy）', desc: 'EICO 北京GM&合伙人'},
  {name: '周八（Lucy）', desc: 'EICO 上海GM&合伙人'},
]
const enter = ref(true)
</script>

<template>
  <view class="seg1 container">
    <span class="font140 inter top25 bottomIn d3s">WHO</span>
    <span class="font140 inter top-2 bottomIn d3s">WE ARE？</span>
    <view class="font60 top6 bottomIn d3s">关于我们</view>
  </view>
  <view class="seg2 container row">
    <view class="column half top10">
      <view class="font56">Introduction</view>
      <view class="font70">自我介绍</view>
    </view>
    <view class="column half top10">
      <view class="font36" style="display: none">天比邻 = 品牌服务 X 营销服务</view>
      <view class="font24 top4">天比邻科技服务公司专注于为中国企业提供全球化品牌赋能。通过精准的DTC+整合营销，公司帮助中国企业将产品和服务展示给海外客户，推动品牌全球化。公司提供的服务包括品牌调研、策划与战略、全渠道数字营销（如Facebook、Google、Tiktok、Twitter）、KOL/KOC合作、户外广告、PR（包括主流与垂直媒体）以及商业视频制作等。主要客户为跨境电商、国内电商、区域品牌和工厂品牌。通过自建站和第三方平台（如亚马逊、eBay、Wish等），公司帮助客户将产品销往全球。天比邻致力于成为品牌全球化服务的领导者，打造高效、协作的年轻团队。</view>
    </view>
  </view>
  <view class="seg3 container">
    <view class="column">
      <view class="font56">Our Values</view>
      <view class="font70">我们的价值观</view>
    </view>
    <img class="image" src="https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_cloud_bg.png" alt=""/>
    <view class="row items">
      <view class="column">
        <view class="row item" v-for="(item, i) in items.slice(0, 4)" :key="i">
          <img :src="`../images/icon_values/icon_values_${i}.png`" alt=""/>
          <view class="column">
            <view class="font26">{{ item.title }}</view>
            <view class="font18">{{ item.desc }}</view>
          </view>
        </view>
      </view>
      <view class="column">
        <view class="row item" v-for="(item, i) in items.slice(4, 8)" :key="i" style="justify-content: flex-end;">
          <view class="column" style="align-items: end;">
            <view class="font26">{{ item.title }}</view>
            <view class="font18">{{ item.desc }}</view>
          </view>
          <img :src="`../images/icon_values/icon_values_${i+4}.png`" alt=""/>
        </view>
      </view>
    </view>
  </view>
  <view class="seg4 container grid">
    <view class="column grid bottomIn d3s" v-for="(u,i) in 32" :key="i">
      <img :src="`../images/clients/img_${i}.png`" width="50%" alt="">
    </view>
  </view>
  <!--团队-->
  <view class="seg5 container grid" v-if="false">
    <view class="column item" v-for="(item,i) in designer" :key="i"
          :style="{backgroundImage:`url('../images/designer/img_designer_${i}.png'`}">
      <view class="font36" style="margin-left: 8%;">{{ item.name }}</view>
      <view class="font26" style="margin-left: 8%;margin-bottom: 4%;">{{ item.desc }}</view>
    </view>
  </view>
  <SegTitle title="专业可靠的国际化营销团队" label="Global Operation Team" enter="enter"/>
  <view class="seg6 container">
    <img src="https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_map_bg.png" alt="">
  </view>
  <view class="seg7 container"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * (1120 / 1920));
  background-color: #586D72;
  background-blend-mode: multiply;
  background-size: cover;
  padding-top: 6%;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_more_bg.png");
}

.seg2.container {
  height: calc(100vw * (660 / 1920));
}

.seg3.container {
  height: calc(100vw * (1413 / 1920));
  justify-content: center;

  .image {
    margin: -6% auto 0 auto;
    width: calc(100vw * (1300 / 1920));
    height: calc(100vw * (1300 / 1920));
  }

  .items {
    z-index: 1;
    position: absolute;
    width: 83.33%;
    margin: auto 0;
    align-items: center;
    justify-content: space-between;

    .item {
      align-items: center;
      margin-bottom: 20%;
      object-fit: contain;

      img {
        width: 30%;
      }

      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
  }
}

.seg4.container {
  height: calc(100vw * (800 / 1920));
  grid-template-columns: repeat(8, 12.5%);
  grid-template-rows: repeat(4, 15%);
  grid-row-gap: 2%;

  .grid {
    opacity: 0.6;
    align-items: center;
    justify-content: center;

    img {
      will-change: filter;
      transition: filter 300ms;
      cursor: pointer;
    }

    img:hover {
      filter: drop-shadow(0 0 1em white);
    }
  }
}

.seg5.container {
  height: calc(100vw * (1054 / 1920));
  grid-template-columns: repeat(3, 33.33%);

  .item {
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: flex-end;
    width: 100%;
    height: calc(100vw * (527 / 1920));
  }
}

.seg6.container {
  height: calc(100vw * (937 / 1920));
  margin-top: -4%;

  img {
    margin: 4.8% 6.25% 3% 6.25%;
  }
}

.seg7.container {
  height: calc(100vw * (1438 / 1920));
  background-size: contain;
  margin-bottom: 13%;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_join_us_bg.png");
}
</style>